<template>
  <div class="online">
    <div class="header">
      <van-nav-bar
        title="在线咨询"
        left-arrow
        shape="round"
        @click-left="onClickLeft"
      />
    </div>
    <div class="main">
      <div class="search">
        <van-search
          v-model="value"
          shape="round"
          background="#fff"
          placeholder="搜索医院、医生、科室、疾病"
        />
      </div>
      <div class="img" @click="handleclick3">
        <img src="https://z3.ax1x.com/2021/07/20/Wt631x.png" alt="" />
      </div>
      <div class="heat">
        <div class="left" @click="handleclick3">
          <img src="https://z3.ax1x.com/2021/07/20/WtRhZT.png" alt="" />
          <span>名医工作室</span>
          <em>主任院长 顶级名医</em>
        </div>
        <div class="right" @click="handleclick3">
          <img src="https://z3.ax1x.com/2021/07/20/WtR7W9.png" alt="" />
          <span>爱心义诊</span>
          <em>在线问医仅需 1元</em>
        </div>
      </div>
      <div class="hot">
        <p>热门门诊</p>
        <van-grid direction="vertical" :column-num="4" :border="false">
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/20/WtveKK.png"
            text="妇产科"
            @click="handleclick3"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/20/WtvKVe.png"
            text="儿科"
            @click="handleclick3"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/20/WtvMUH.png"
            text="内科"
            @click="handleclick3"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/20/Wtv82t.png"
            text="外科"
            @click="handleclick3"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/20/WtvGxP.png"
            text="皮肤科"
            @click="handleclick3"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/20/Wtvw5j.png"
            text="耳鼻喉科"
            @click="handleclick3"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/20/Wtvr2q.png"
            text="中医科"
            @click="handleclick3"
          />
          <van-grid-item
            icon="https://z3.ax1x.com/2021/07/20/WtvcrT.png"
            text="更多"
            @click="handleclick3"
          />
        </van-grid>
      </div>
      <div class="recommend">
        <p>名医推荐</p>
        <div class="list">
          <ul>
            <li
              v-for="item in state.list"
              :key="item._id"
              @click="handleclick3"
            >
              <div class="img"><img :src="item.imgurl" alt="" /></div>
              <div class="result">
                <span class="name">{{ item.name }}</span>
                <span class="duty">{{ item.dications }}</span>
                <br />
                <span class="address">{{ item.belongto }}</span>
                <div class="show">
                  <span class="span1">图文</span>
                  <span class="span2">电话</span>
                  <span class="span3">贴心就诊</span>
                  <span class="span4">私人医生</span>
                  <span class="span5">专病</span>
                </div>
                <span class="information">擅长：{{ item.information }}</span>
                <div class="bottom">
                  <span class="height">回复率：{{ item.replay }}</span>
                  <span class="service">咨询{{ item.service }}</span>
                  <span class="price">{{ item.newprice }}咨询</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, computed, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";

export default {
  setup() {
    const store = useStore();
    const router = useRouter();

    const state = reactive({
      list: computed(() => store.state.getMessagelist),
    });
    setTimeout(() => {
      console.log(state.list);
    }, 2000);
    const onClickLeft = () => {
      router.push("/home/index");
    };
    const handleclick3 = () => {
      Toast("功能建设中...敬请期待！！！");
    };
    // const /

    onMounted(() => {
      getlist();
    });
    const getlist = () => {
      store.dispatch("getOnlinelistAsync");
    };
    const value = ref("");
    return {
      value,
      onClickLeft,
      state,
      getlist,
      handleclick3,
    };
  },
};
</script>
<style lang="less">
.online {
  background: #fff;
  .header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
  }
  .main {
    margin-top: 46px;
    padding: 0 15px;
    .img {
      width: 100%;
      padding: 15px 0;
      img {
        width: 100%;
      }
    }
    .heat {
      display: flex;
      justify-content: space-between;
      .left {
        width: 161px;
        height: 65px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 1px rgba(72, 81, 94, 0.09);
        border-radius: 8px;
        img {
          width: 25px;
          height: 25px;
          position: relative;
          top: 6px;
          left: 2px;
        }

        span {
          margin-left: 5px;
          display: inline-block;
          width: 125px;
          height: 17px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #4d5060;
          line-height: 18px;
        }
        em {
          display: inline-block;
          text-align: center;
          background: #fff5e9;
          border-radius: 19px;
          width: 120px;
          height: 13px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #e76c1c;
          line-height: 13px;
          position: relative;
          top: -6px;
          left: 10px;
        }
      }
      .right {
        width: 161px;
        height: 65px;
        background: #ffffff;
        box-shadow: 0px 2px 4px 1px rgba(72, 81, 94, 0.09);
        border-radius: 8px;
        img {
          width: 25px;
          height: 25px;
          position: relative;
          top: 6px;
          left: 2px;
        }
        span {
          margin-left: 5px;
          display: inline-block;
          width: 125px;
          height: 17px;
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #4d5060;
          line-height: 18px;
        }
        em {
          display: inline-block;
          text-align: center;
          background: #fff5e9;
          border-radius: 19px;
          width: 120px;
          height: 13px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #e76c1c;
          line-height: 13px;
          position: relative;
          top: -6px;
          left: 10px;
        }
      }
    }
    .hot {
      padding-top: 30px;
      p {
        width: 154px;
        height: 37px;
        font-size: 19px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
      }

      .van-icon__image {
        width: 36px;
        height: 36px;
      }
      .van-grid-item__text {
        width: 69px;
        height: 23px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 18px;
        text-align: center;
      }
    }
    .recommend {
      padding-top: 10px;
      p {
        width: 145px;
        height: 18px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 40px;
      }
      .list {
        width: 100%;
        padding-top: 20px;
        li {
          border-top: 1px solid #ddd;
          display: flex;
          flex-direction: row;

          width: 100%;
          padding: 10px;
          .img {
            width: 45px;
            height: 45px;
            margin-right: 10px;
            img {
              width: 45px;
              height: 45px;
              border-radius: 50%;
            }
          }

          .name {
            width: 50px;
            height: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            line-height: 20px;
          }
          .duty {
            margin-left: 10px;
            width: 60px;
            height: 15px;
            font-size: 15px;
            font-weight: 500;
            color: #333333;
            line-height: 18px;
          }
          .address {
            height: 15px;
            font-size: 15px;
            font-weight: 500;
            color: #333333;
            line-height: 18px;
            position: relative;
            top: -10px;
          }
          .show {
            width: 230px;
            display: flex;
            justify-content: space-around;
            span {
              border-radius: 4px;
              font-size: 12px;
              text-align: center;
              height: 18px;
              line-height: 18px;
              color: #fff;
            }
            .span1 {
              width: 34px;
              background: #3bd1b4;
              border-radius: 3px;
            }
            .span2 {
              width: 34px;
              background: #7bd7f0;
              border-radius: 3px;
              margin-left: 5px;
            }
            .span3 {
              width: 60px;
              background: #a1a8f9;
              border-radius: 3px;
              margin-left: 5px;
            }
            .span4 {
              width: 60px;
              background: #fbabc6;
              border-radius: 3px;
              margin-left: 5px;
            }
            .span5 {
              width: 34px;
              background: #ff8719;
              border-radius: 3px;
              margin-left: 5px;
            }
          }
          .information {
            width: 100%;
            height: 40px;
            font-size: 15px;
            font-weight: 500;
            color: #666666;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: wrap;
            display: block;
          }
          .bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            .height {
              height: 13px;
              font-size: 12px;
              font-weight: 500;
              color: #666666;
              line-height: 18px;
              line-height: 32px;
              text-align: center;
            }
            .service {
              height: 13px;
              font-size: 12px;
              font-weight: 500;
              color: #666666;
              line-height: 18px;
              line-height: 32px;
              text-align: center;
            }
            .price {
              width: 80px;
              height: 32px;
              background: #17a2ff;
              border-radius: 16px;
              font-size: 15px;
              line-height: 32px;
              text-align: center;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
